<template>
  <div v-if="data">
    <!-- 头部 -->
    <Header></Header>
    <!-- 轮播图 -->
    <div class="swiper">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          class="swiper_item"
          v-for="(item, i) in get_index_carousel"
          :key="i"
        >
          <a href="javascript:;"
            ><img :src="item.pic" alt="" class="index_img"
          /></a>
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 导航 -->
    <div class="nav">
      <ul>
        <li v-for="(item, i) in get_index_category" :key="i">
          <a @click="toTypeCake(item.index_cgy_title)" href="javascript:;">
            <img :src="item.pic" alt="" class="index_cagy_img" />
            <span>{{ item.index_cgy_title }}</span>
          </a>
        </li>
      </ul>
    </div>
    <!-- 中间内容部分 -->
    <div class="content">
      <div class="content_box_specialarea">
        <div class="content_box_title">
          <span class="content_box_title_line">——</span>
          <span class="content_box_title_txt">美味惠不断</span>
          <span class="content_box_title_line">——</span>
        </div>
        <div class="content_box_item">
          <ul>
            <li v-for="(item, i) in get_index_specialarea" :key="i">
              <a href="javascript:;">
                <img :src="item.pic" alt="" class="specialarea_img" />
                <div class="content_box_item_text">
                  {{ item.index_spl_title }}
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="content_box_middle">
        <div class="content_box_title">
          <span class="content_box_title_line">——</span>
          <span class="content_box_title_txt">美味送到家</span>
          <span class="content_box_title_line">——</span>
        </div>
        <van-grid :border="false" :column-num="5">
          <van-grid-item>
            <van-image src="/img/index_icon/zaocan.png" />
            <p>早餐</p>
          </van-grid-item>
          <van-grid-item>
            <van-image src="/img/index_icon/wucan.png" />
            <p>午餐</p>
          </van-grid-item>
          <van-grid-item>
            <van-image src="/img/index_icon/noontea.png" />
            <p>下午茶</p>
          </van-grid-item>
          <van-grid-item>
            <van-image src="/img/index_icon/taocan.png" />
            <p>套餐</p>
          </van-grid-item>
          <van-grid-item>
            <van-image src="/img/index_icon/cake.png" />
            <p>蛋糕</p>
          </van-grid-item>
        </van-grid>
      </div>
      <div class="content_box_bottom">
        <div class="content_box_title">
          <span class="content_box_title_line">——</span>
          <span class="content_box_title_txt">自助无接触</span>
          <span class="content_box_title_line">——</span>
        </div>
        <van-grid :border="false" :column-num="4">
          <van-grid-item>
            <van-image
              src="/img/index_icon/ziti.png"
              class="content_box_bottom_img"
            />
            <p>预点自提</p>
          </van-grid-item>
          <van-grid-item>
            <van-image
              src="/img/index_icon/guanwang.png"
              class="content_box_bottom_img"
            />
            <p>外卖</p>
          </van-grid-item>
          <van-grid-item>
            <van-image
              src="/img/index_icon/zizhu.png"
              class="content_box_bottom_img"
            />
            <p>自助点餐</p>
          </van-grid-item>
          <van-grid-item>
            <van-image
              src="/img/index_icon/phone.png"
              class="content_box_bottom_img"
            />
            <p>订购热线</p>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "../components/Footer.vue";
import Header from '../components/Header.vue';

export default {
  components: { Footer, Header },
  data() {
    return {
      data: null, //首页数据
    };
  },
  created() {
    this.loadIndex(); //初始化导航
  },
  // mounted() {},
  methods: {
    loadIndex() {
      this.axios.get("/index/index_Interface").then((res) => {
        console.log(res);
        this.data = res.data;
      });
    },
    toTypeCake(title) {
      if (title == "蛋糕商城") {
        this.$router.push("/typecake");
        console.log(666);
      }
    },
  },
  computed: {
    get_index_carousel() {
      return this.data.carousel;
    },
    get_index_category() {
      return this.data.category;
    },
    get_index_specialarea() {
      return this.data.specialarea;
    },
  },
};
</script>

<style scoped src="../assets/css/index.css"></style>
<style lang="scss" scoped></style>
